<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { onMounted } from 'vue'
import { getNine } from '../api/stall'
// import { getUser } from "../api/stall"
import { getLits } from '../api/stall'
import { getPrms } from '../api/stall'

export default defineComponent({
  setup() {
    //写一个数组
    const classifyList: any = ref<Array<any>>([
      {
        name: '综合',
        id: 1,
        order_by: 'comprehensive',
        conFlag: true
      },
      {
        name: '新上市',
        id: 2,
        order_by: 'online_time',
        conFlag: false
      },
      {
        name: '畅销',
        id: 3,
        order_by: 'sold_num',
        conFlag: false
      },
      {
        name: '价格',
        id: 4,
        order_by: '-price',
        conFlag: false
      }
    ])
    console.log(classifyList)

    const route = useRoute()

    //综合
    var nine: any = ref<Array<any>>([])
    const getNineFun = () => {
      console.log(route.query.uid)
      getNine({ uid: route.query.uid }).then((data: any) => {
        console.log(data)
        nine.value = data.data.list
      })
    }

    // 用户ID
    var User: any = ref<Array<any>>([])
    const getLitsFun = () => {
      getLits({ uid: route.query.uid }).then((data: any) => {
        // console.log(data);
        User.value = data.data
        console.log(User.value)
      })
    }

    var parlis: any = ref<Array<any>>([])
    const prms = (order_by: any) => {
      let index = classifyList.value.findIndex((item: any) => {
        return item.order_by == order_by
      })

      classifyList.value.forEach((item: any) => {
        item.conFlag = false
      })
      classifyList.value[index].conFlag = true

      getPrms({ uid: route.query.uid, order_by }).then((data: any) => {
        console.log(data)
        nine.value = data.data.list
      })
    }

    //跳转作者
    //           const getUid = (path:any, uid:any) => {
    //     console.log(uid);
    //     router.push({
    //         path,
    //         query:{
    //             uid
    //         }
    //     })
    // }

    //跳转详情
    const Dode = (path: any, goods_id: any) => {
      console.log(goods_id)

      router.push({
        path,
        query: {
          goods_id // 商品id
        }
      })
    }

    const detailHander = (path: any, goods_id: any) => {
      router.push({
        path,
        query: {
          goods_id
        }
      })
    }

    onMounted(() => {
      getNineFun()
      getLitsFun()
    })

    let router: any = useRouter()
    return {
      nine,
      Dode,
      User,
      // getUid
      classifyList,
      prms,
      parlis,
      detailHander
    }
  }
})
</script>

<template>
  <div>
    <!-- 顶部订单列表？ -->
    <div class="new">
      <div class="new-l">
        <span class="iconfont icon-zuojian" @click="$router.back()"></span>
      </div>

      <div class="font"></div>
      <div class="leftl">
        <div class="tle"><span class="iconfont icon-sangedian"></span></div>
      </div>
    </div>

    <div class="lits">
      <div class="noe">
        <div class="imgs">
          <!-- <img src="../assets/img/50.jpg" alt=""> -->
          <img :src="User.avatar_url" alt="" />
        </div>
        <div class="noew">
          <span class="flex">
            <!-- 玖宫久久 -->
            {{ User.nickname }}
          </span>
          <span class="tetx">同人创作者</span>
          <div class="text-gray">
            粉丝数:
            {{ User.fans }}
          </div>
        </div>
      </div>
      <div class="mhy-sticky">
        <div
          :class="['van-sticky', { con: item.conFlag }]"
          v-for="item in classifyList"
          :key="item.id"
          @click="prms(item.order_by)"
        >
          {{ item.name }}
        </div>
      </div>

      <div class="list-no">
        <div class="loading">
          <ul>
            <li
              v-for="item in nine"
              :key="item.goods_id"
              @click="detailHander('/detail', item.goods_id)"
            >
              <div class="card__title">
                <!-- <img src="../assets/img/11.jpg" alt=""> -->
                <img :src="item.cover_url" alt="" />
              </div>
              <h5 class="lis">
                <span class="tss">
                  <!-- <img src="../assets/img/12.jpg" alt=""> -->
                </span>
                <span class="card">
                  <!-- 【月舞阁】原神同人周边-人物系列 马口铁徽章 山楂 节日主题 -->
                  {{ item.goods_name }}
                </span>
              </h5>
              <div class="rd">
                <span class="let-1">¥</span>
                <span class="let-2">
                  <!-- 1111 -->

                  {{ (item.market_price / 100).toFixed(2) }}
                </span>
                <!-- <span class="let-3">.00</span> -->
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.new {
  height: 44px;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  //   border-bottom: 2px solid #fbfbfb;
}

.new-l {
  width: 10%;
  line-height: 44px;
  margin-left: 10px;
}

.font {
  width: 70%;
  /* background-color: orange; */
  text-align: center;
  line-height: 45px;
  font-size: 15px;
}

.leftl {
  height: 32px;
  background-color: #ffffff;
  border: 1px solid #f6f6f6;
  width: 15%;
  margin-right: 10px;
  margin-left: 5px;
  margin-top: 6px;
  border-radius: 20px;
  margin-right: 5px;
}

.leftl .iconfont {
  padding-left: 2px;
}

.leftl .tle {
  height: 22px;
  width: 22px;
  margin: 0 auto;
  /* background-color: beige; */
  padding-top: 8px;
}

.lits {
  width: 100%;
  height: 700px;
  background-color: #ffffff;
}

.noe {
  padding-left: 10px;
  height: 70px;
  // background-color: orange;
  border-bottom: 2px solid #f5f5f6;
  display: flex;
}

.imgs {
  width: 50px;
  height: 50px;
  // background-color: blue;
  display: flex;
}

.imgs img {
  width: 100%;
  border-radius: 50%;
}

.noew {
  height: 60px;
  // background-color: chocolate;
  padding-left: 10px;
  margin-top: 7px;
}

.noew .flex {
  font-size: 15px;
}

.tetx {
  background-color: #fffae4;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 10px;
  border-radius: 4px;
  color: #fecb75;
}

.text-gray {
  padding-top: 10px;
}

.mhy-sticky {
  padding-left: 10px;
  height: 40px;
  background-color: #ffffff;
  display: flex;
}

.van-sticky {
  height: 20px;
  // background-color: orange;
  line-height: 20px;
  margin-top: 10px;
  width: 15%;
  text-align: center;
  font-size: 14px;

  &.con {
    color: orange;
  }
}

//

.list-no {
  width: 100%;
  height: 800px;
  background-color: #f3f3f4;
}

.loading {
  margin: 0 18px;

  /* height: 700px; */
  /* background-color: orange; */
  display: flex;
}

.loading ul {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}

.loading li {
  width: 48%;
  height: 230px;
  background-color: #ffffff;
  margin-top: 11px;
  border-radius: 8px;
}

/* .card__title{
   height: 145px; 
    background-color: firebrick; 
  } */
.card__title img {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  width: 100%;
}

.loading .lis {
  font-size: 15px;
  font-weight: 500;
  color: #2d2d49;
  line-height: 15px;
  margin: 0 10px;
  overflow: hidden;
  line-height: 18px;
  padding-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* height: 36px; */
  /* background-color: khaki; */
}

.loading .card {
  font-size: 14px;
}

.tss {
  //   width: 35px;
  /* height: 15px; */
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tss img {
  width: 100%;
}

.rd {
  height: 17px;
  /* background-color: blueviolet; */
  margin: 0 10px;
  margin-top: 2px;
  display: flex;
}

.rd .let-1 {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
}

.rd .let-2 {
  font-size: 12px;
  font-weight: 700;
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
}
</style>
